import React from 'react';
import { Link } from 'react-router-dom';
import './Services.css';

const Services = () => {
  return (
    <>
      <div className="inner-banner">
        <section className="w3l-breadcrumb">
          <div className="container">
            <ul className="breadcrumbs-custom-path">
              <li><Link to="/">首页</Link></li>
              <li className="active"><span className="fa fa-chevron-right mx-2" aria-hidden="true"></span> 服务</li>
            </ul>
          </div>
        </section>
      </div>
      
      <section className="w3l-bottom-grids-6 py-5" id="services">
        <div className="container py-lg-5 py-md-4">
          <h6 className="title-small text-center">我们的服务</h6>
          <h3 className="title-big mb-md-5 mb-4 text-center">服务项目</h3>
          <div className="grids-area-hny main-cont-wthree-fea row">
            <div className="col-lg-4 col-md-6 grids-feature">
              <div className="area-box">
                <span className="fa fa-retweet mt-0"></span>
                <h4><a href="#feature" className="title-head">社交媒体策略</a></h4>
                <p className="my-3">为您的品牌打造专业的社交媒体营销策略，提升品牌知名度和影响力。</p>
                <a href="#url" className="more">了解更多</a>
              </div>
            </div>
            {/* 可以添加更多服务项目 */}
          </div>
        </div>
      </section>

      <section className="w3l-pricing">
        <div className="py-5" id="pricing">
          <div className="container py-lg-5">
            <h5 className="title-small text-center">价格方案</h5>
            <h3 className="title-big text-center mb-sm-5 mb-4">为客户提供最佳解决方案</h3>
            {/* 添加价格方案卡片 */}
          </div>
        </div>
      </section>
    </>
  );
};

export default Services; 